<template>
  <div class="import-excel-wrapper">
    <Hints>
      <template slot="hintName">SHAPE文件</template>
      <template slot="hintInfo">
        <p>Shape文件通常由多个文件组成，包括主要的.shp、.dbf、.shx和.prj文件，以及其他可选的文件如.sbn、.sbx、.cpg、.qmd等文件。</p>
        <p>.cpg文件尤为重要，.cpg 文件发源于 ESRI 的 ArcGIS 软件,用于指定该Shapefile的字符编码。它通常是一个文本文件，包含一行字符集名称，例如 UTF-8、GBK 等。</p>
        <p>.sbn和.sbx文件是Shape文件中的空间索引文件。</p>
        <p>.qmd文件通常是由QGIS软件生成的元数据文件。</p>
      </template>
    </Hints>
    <el-card shadow="always">
      <div class="upload-shape-wrapper">
        <el-upload
          ref="upload"
          action
          accept=".shx, .shp, .qmd, .prj, .dbf, .cpg ,.sbn,.sbx"
          :multiple="true"
          :show-file-list="true"
          :auto-upload="false"
          :limit="9"
          :on-exceed="handleLimit"
          :on-change="handleChange"
          :file-list="upload.fileList"
        >
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传解析</el-button>
          <el-button style="margin-left: 10px;" size="small" type="warning" @click="clearFiles">清空文件</el-button>
          <div slot="tip" class="el-upload__tip">只允许上传20M以上文件，且只显示50条信息！</div>
        </el-upload>
      </div>


      <el-table
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        size="medium"
      >
        <el-table-column v-for="item in tableHeader" :key="item" :prop="item" :label="item" align="center" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import Hints from '@/components/Hints'
import { uploadFile } from '@/api/map'
export default {
  name: 'ImportShape',
  components: {  Hints },
  data() {
    return {
      tableHeader: [],
      tableData: [],
      upload: {
        fileList: [],
        fileName: []
      }
    }
  },
  methods: {
    handleSuccess({ header, results }) {
      this.tableHeader = header
      this.tableData = results
    },
    handleLimit() {
      this.$message.warning('shape文件最多5个文件!')
      return false
    },

    clearFiles(){
      this.$refs.upload.clearFiles();
    },
    handleChange(file,fileList) {
      this.upload.fileList = fileList;
    },
    isShape(file) {
      return /\.(shx|shp|qmd|prj|dbf|cpg|sbn|sbx)$/.test(file.name)
    },

    shapeFileCheck(fileType){
      let isContain = false;
      for (let i = 0; i < this.upload.fileList.length; i++) {
        const file = this.upload.fileList[i];
        const fileName = file.name;
        if (fileName.endsWith(fileType)) {
          isContain = true;
          break;
        }
      }
      return isContain;
    },

    submitUpload() {
      if(this.upload.fileList.length === 0) {
        this.$message.error('请先选择文件!')
        return false
      }
      if (!(this.shapeFileCheck('.shx') && this.shapeFileCheck('.shp')
          && this.shapeFileCheck('.prj') && this.shapeFileCheck('.dbf'))) {
        this.$message.error('Shape文件不完整,应包含.shx, .shp, .qmd, .prj, .dbf文件，.cfg文件可有可无!');
        return;
      }
      if (!this.shapeFileCheck('.cpg') ) {
        this.$message.warning('不包含.cpg文件，可能会导致乱码!');
      }
      // 创建新的数据对象
      let formData = new FormData();
      // 将上传的文件放到数据对象中
      this.upload.fileList.forEach(file => {
        if(!this.isShape(file.raw)){
          this.$message.warning('文件支持.shx, .shp, .qmd, .prj, .dbf, .cpg格式!')
          return false
        }
        formData.append('file', file.raw);
        this.upload.fileName.push(file.name);
      });
      console.log("提交前",formData.getAll('file'));
      // 文件名
      formData.append('fileName', this.upload.fileName);
      // 自定义上传
      let that = this;
      that.tableHeader = [];
      uploadFile(formData).then(res => {
        res.attributeList.forEach(item => {
          that.tableHeader.push(item.name);
        });
        that.tableData = [];
        var showData = res.geoJson.length > 50 ? res.geoJson.slice(0, 50) : res.geoJson;
        showData.forEach(item => {
          that.tableData.push(item.properties);
        });
      })
    }

  }
}
</script>

<style lang="less">

.upload-shape-wrapper {
  display: flex;
  align-content: center;
  justify-content: center;
  margin-bottom: 30px;
  .el-upload-dragger {
    width: 580px;
  }
}


</style>
